<template>
	<view class="goods_detail">
		<!-- 轮播图开始 -->
		<view class="goods_detail_swiper">
			<swiper circular="true" indicator-color="true" indicator-dots="true">
				<swiper-item v-for="(item,index) in goods_detail.pics" :key="index">
					<image :src="item.pics_mid" @tap="handleImageClick($event)" :data-pics="goods_detail.pics"
						:data-current="item.pics_mid"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 轮播图结束 -->
		<!-- 商品描述开始 -->
		<view class="goods_detail_desc">
			<view class="desc1">
				<view class="price">￥{{goods_detail.goods_price}}</view>
				<view class="shareAndCollect">
					<view class="share">
						<view class="iconfont icon-fenxiang"></view>
						<button class="default" size="default" open-type="share"></button>
					</view>
					<view @tap="handleCollect"
						:class="['iconfont', isCollect?'icon-shoucang_gaoliang active':'icon-shoucang']"></view>
				</view>



			</view>
			<!-- 商品标题开始 -->
			<view class="desc2">
				<text class="title">{{goods_detail.goods_name}}</text>
			</view>
			<!-- 商品标题结束 -->
			<!-- 图文详情开始 
rich-text https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
-->
			<view class="desc3">
				<view class="desc3_title">图文详情</view>
				<rich-text :nodes="goods_detail.goods_introduce"></rich-text>
			</view>
			<!-- 图文详情结束 -->
		</view>
		<!-- 商品描述结束 -->
		<!-- 商品工具栏开始 -->
		<view class="tool_sets">
			<!-- 联系客服开始 -->
			<view class="contact">
				<view class="iconfont icon-lianxikefu"></view>
				<view class="text">联系客服</view>
				<!-- 主要是利用button的开放功能 concat 调用系统的客服功能 -->
				<button class="default" size="default" open-type="contact"></button>
			</view>
			<!-- 联系客服结束 -->
			<!-- 购物车按钮开始 -->
			<navigator url="/pages/cart/cart" open-type="switchTab" class="gouwuche">
				<view class="iconfont icon-gouwuche"></view>
				<view class="text">购物车</view>
			</navigator>
			<!-- 购物车按钮结束 -->
			<!-- 加入购物车开始 -->
			<view class="addToCart">
				<view class="text" @tap="handleCartAdd">加入购物车</view>
			</view>
			<!-- 加入购物车结束 -->
			<!-- 立即购买开始 -->
			<view class="buy">
				<view class="text" @tap="handleBuy">立即购买</view>
			</view>
			<!-- 立即购买结束-->
		</view>
		<!-- 商品工具栏结束 -->

	</view>
</template>

<script>
	export default {
		onLoad: function(options) {
			this.getGoodsInfo(options);
		},
		data() {
			return {
				goods_detail: {}, //用来存详情信息
				isCollect: false // 是否被收藏
			};
		},
		methods: {
			//处理 点击 加入购物车 的逻辑
			handleCartAdd: function(e) {
				//先从缓存中获取一下购物车的信息
				// 加一个空的阈值 判断
				let carts = uni.getStorageSync("carts") || [];
				// 通过findIndex 查看一下carts中有没有当前商品的信息
				let index = carts.findIndex(v => v.goods_id === this.goods_detail.goods_id);
				//如果是第一次添加的话 那么 index === -1
				if (index === -1) {
					let goods_detail = this.goods_detail;
					goods_detail.num = 1; //第一次添加商品数量就是1
					goods_detail.checked = true; // 后面购物小车会用到 作用是在购物小车的界面默认勾选上这个商品
					// 把商品添加到购物小车中
					carts.push(goods_detail);
				} else {
					// 如果在carts 里面已经存在购物小车信息
					carts[index].num++;
				}
				//重新把购物车信息添加到缓存中
				uni.setStorageSync("carts", carts);
				//提示用户 商品已经被添加到购物车中了
				if (!e.pay) {
					uni.showToast({
						title: '加入成功',
						icon: "success",
						//防止用户乱点 加遮罩
						mask: true
					})
				}
			},
			//定义收藏图标的点击事件
			handleCollect: function(e) {
				// 标识商品是否已经被收藏;默认没有被收藏
				let isCollect = false;
				//从本地缓存中找到收藏的商品信息 本地缓存信息（所有商品）=>collect=>数组
				//如果获取到的collect，所有的商品的收藏信息 
				//为了防止一开始初始化的时候，collect为空，我们这里加一个阈值 [] => 空数组
				// collect 所有商品的收藏信息
				let collect = uni.getStorageSync("collect") || [];
				// 判断一下该商品是否在 collect 中有没有被收藏
				// findIndex使用   https://www.runoob.com/jsref/jsref-findindex.html
				let index = collect.findIndex(v => v.goods_id === this.goods_detail.goods_id);
				//index 
				//如果collect 数组已经有收藏商品 index就是它所在的下标
				//如果没有的话 index就是-1 
				if (index != -1) {
					//代表产品之前被收藏过 取消收藏 把商品从collect 中移除
					//splice 移除方法  注意:该方法会修改原数组https://www.runoob.com/jsref/jsref-splice.html
					collect.splice(index, 1);
					// 标识一下 这个商品已经被移除收藏
					isCollect = false;
					//温馨提示一下用户 该商品已经移除收藏
					// https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/uni.showToast.html
					uni.showToast({
						title: '取消成功',
						icon: "success",
						mask: true
					})
				} else {
					// 存储到collect 中 this.goods_detail 就是返回的商品信息
					collect.push(this.goods_detail);
					//同时标识已经被收藏
					isCollect = true;
					uni.showToast({
						title: '收藏成功',
						icon: "success",
						mask: true //防止用户乱点 遮罩
					})
				}
				//更新之后的collect 收藏的数组列表 存回本地
				uni.setStorageSync("collect", collect)
				this.isCollect = isCollect;

			},

			//获取商品的详情信息
			getGoodsInfo: async function(params) {
				// 1. 发送请求 获取产品详情信息
				const goods_detail = await this.$request({
					url: "/goods/detail",
					data: params
				});
				
				// 获取一下缓存中的商品收藏信息
				let collect = uni.getStorageSync("collect") || [];
				//判断一下 当前产品是否在 collect 中
				// some  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some
				let isCollect = collect.some(v => v.goods_id === goods_detail.goods_id);

				// 设置 产品信息到 data 属性中
				this.goods_detail = goods_detail;
				this.isCollect = isCollect;
			},
			//处理图片的点击预览事件
			handleImageClick: function(e) {
				//打印事件源
				console.log(e);
				//current 当前点击之后的图片信息
				//pics 就是我们预览的图片列表信息
				const {
					pics,
					current
				} = e.currentTarget.dataset;
				//微信提供的 预览图片功能 
				// 官方文档 https://developers.weixin.qq.com/miniprogram/dev/api/media/image/uni.previewImage.html
				uni.previewImage({
					current: current,
					// 遍历接口里的中等大小的图片
					//urls里面是需要预览的图片http链接列表
					// pics.map(v => v.pics_mid)  返回的数据结构 ["xxx.jpg","xxx1.jpg"] 对的结构
					// pics.map(v=>{v.pics_mid}) 返回的数据结构 [{"xxx.jpg"},{"xxx1.jpg"}] 错的结构
					urls: pics.map(v => v.pics_mid),
				})
			},
			//立即购买
			handleBuy: function() {
				this.handleCartAdd({
					pay: true
				});
				uni.navigateTo({
					url: '/pages/pay/pay',
				})
			},
		}
	}
</script>

<style lang="less">
	.goods_detail {
		/*底部的工具栏  */
	}

	.goods_detail .goods_detail_swiper swiper {
		height: 497rpx;
	}

	.goods_detail .goods_detail_swiper swiper swiper-item {
		text-align: center;
	}

	.goods_detail .goods_detail_swiper swiper swiper-item image {
		height: 497rpx;
		width: 497rpx;
	}

	.goods_detail .goods_detail_desc .desc1 {
		height: 50rpx;
		margin: 19rpx 33rpx;
		display: flex;
		justify-content: space-between;
	}

	.goods_detail .goods_detail_desc .desc1 .price {
		font-size: 36rpx;
		color: var(--themeColor);
		line-height: 50rpx;
	}

	.goods_detail .goods_detail_desc .desc1 .shareAndCollect {
		display: flex;
		height: 100%;
		align-items: center;
		font-size: 36rpx;
	}

	.goods_detail .goods_detail_desc .desc1 .shareAndCollect .share {
		position: relative;
	}

	.goods_detail .goods_detail_desc .desc1 .shareAndCollect .share .iconfont.icon-fenxiang {
		margin-right: 45rpx;
	}

	.goods_detail .goods_detail_desc .desc1 .shareAndCollect .share button {
		position: absolute;
		opacity: 0;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

	.goods_detail .goods_detail_desc .desc1 .shareAndCollect .active {
		color: var(--themeColor);
	}

	.goods_detail .goods_detail_desc .desc2 {
		margin: 0rpx 33rpx 48rpx 33rpx;
	}

	.goods_detail .goods_detail_desc .desc2 .title {
		font-size: 30rpx;
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.goods_detail .goods_detail_desc .desc3 .desc3_title {
		text-align: center;
		font-size: 28rpx;
		margin-top: 38rpx;
	}

	.goods_detail .tool_sets {
		position: fixed;
		bottom: 0;
		display: flex;
		background-color: #FFFF;
		width: 100vw;
		border: 1rpx solid #DEDEDE;
		height: 94rpx;
		/* 联系客服 */
		/* 购物车 */
		/* 加入购物车 */
	}

	.goods_detail .tool_sets .contact {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.goods_detail .tool_sets .contact .text {
		text-align: center;
		font-size: 20rpx;
	}

	.goods_detail .tool_sets .contact button {
		position: absolute;
		opacity: 0;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.goods_detail .tool_sets .gouwuche {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.goods_detail .tool_sets .gouwuche .text {
		text-align: center;
		font-size: 20rpx;
	}

	.goods_detail .tool_sets .addToCart {
		flex: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.goods_detail .tool_sets .addToCart .text {
		font-size: 26rpx;
		height: 60rpx;
		width: 196rpx;
		border-radius: 30rpx;
		color: white;
		background-color: #FCAA23;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.goods_detail .tool_sets .buy {
		flex: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.goods_detail .tool_sets .buy .text {
		font-size: 26rpx;
		height: 60rpx;
		width: 196rpx;
		border-radius: 30rpx;
		background-color: var(--themeColor);
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
	}
</style>
